<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车主服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
        .tishi{
            padding: 20px 10px 0 30px;
            position: relative;
            /*display: none;*/
        }
        .tishi p{
            color: #000;
        }
        .tishi span{
            color: red;
        }
        .tishi img{
            position: absolute;
            width: 20px;
            height: 20px;
            top: 15px;
            left: 9px;
        }
        .dingdan{
          padding-top: 10px;
        }
        .dingdan ul{
            margin: 0;
            list-style: none;
            padding: 0;
        }
        .dingdan ul li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: #FFFFFF;
        }
        .dingdan ul li .dingdanH{
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            padding:0 10px;
            height: 30px;
            border-top: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            font-size: 15px;
        }
        .dingdan ul li .dingdanH span:last-child{
            color: red;
        }
        .dingdan ul li .dingdanH p{
            width:70%;
            margin: 0;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            font-size: 15px;
        }
        .dingdan ul li div p img:last-child{
            margin-left: 34%;
        }
        .dingdan ul li .dingdanH p span{
            margin-left: 7px;
            color: #000000;
        }
        .dingdan ul li img{
            width: 20px;
            height: 20px;
            margin-top: 5px;
        }
        .dingdanX{
           box-shadow: 0 2px 2px 0 #cccccc;
            display: none;
        }
        .dingdanX .dingdanXX{
            margin: 10px 0 0 0;
            padding: 0 10px;
            list-style: none ;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            font-size: 12px;
        }
        .dingdanX .jindutiao{
            padding: 0 20px;
        }
        .dingdanX .jindutiao span{
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: red;
            border: 1px solid red;
            float: left;
        }
        .dingdanX .jindutiao{
            height: 15px;
        }
        .dingdanX .jindutiao p{
            display: inline-block;
            width: 17%;
            height: 2px;;
            background: red;
            float: left;
            margin-bottom: 0;
            margin-top: 6px;
        }
        .dingdanX .dingdanList{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 10px 15px 0 15px;
        }
        .dingdanX .dingdanList li{
            width:41%;
            font-size: 14px;
        }
        .btn_x{
            text-align: center;
            margin: 10px 0;
        }
        .btn_x button{
            width: 82px;
            height: 33px;
            margin: 0 auto;
        }
        .spanw{
            color: #6d6d72;
        }
        .dingdanX .listU {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0 15px;
        }
        .dingdanX .listU  li{
            width:96%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .dingdanX .listU li span{
            width:50%;
        }
        .dingdanX ul li span:last-child{
            text-align: center;
        }
    </style>
</head>
<body style="background: #fff">
<div class="index_header index_header_service">
    <a href="#">
        <span>北京</span>
        <i class="fa fa-angle-down"></i>
    </a>
    <a href="#">
        <i class="fa fa-cloud"></i>
        -1°
    </a>
    <a href="#">
        今日限行 4,9
    </a>
    <div class="clearfix"></div>
</div>
<div class="index_body_content">
    <!--警告-->
    <div class="tishi">
        <p>本次还款金额<span>12545645</span>距离还款时间<span>15</span>天，请在招商银行尾号0256的卡中准备好足够的余额。</p>
        <p>已还款 <span>3</span> 期，还款总额 <span>15860</span>。</p>
        <img src="images/jinggao.png" alt=""/>
    </div>
    <!--订单-->
    <div class="dingdan">
        <ul>
            <li>
                <div class="dingdanH">
                    <p>
                        <img src="images/dingdan.png" alt=""/>
                        <span>订单号</span>
                        <img src="images/leftF.png" alt="">
                    </p>
                    <span>交易中</span>
                </div>
                <div class="dingdanX">
                     <ul class="dingdanXX">
                         <li>创建订单</li>
                         <li>已付首付</li>
                         <li>车辆发车</li>
                         <li>车辆以上牌</li>
                         <li>交易完成</li>
                     </ul>
                   <div class="jindutiao">
                       <span></span>
                       <p></p>
                       <span></span>
                       <p></p>
                       <span></span>
                       <p></p>
                       <span></span>
                       <p></p>
                       <span></span>
                   </div>
                    <div class="btn_x">
                        <button type="button">确认提车</button>
                    </div>
                    <ul class="dingdanList">
                        <li>
                            <span>车型:</span>
                            <span class="spanw">456465</span>
                        </li>
                        <li>
                            <span>车牌:</span>
                            <span class="spanw">132123123</span>
                        </li>
                        <li>
                            <span>颜色:</span>
                            <span class="spanw">黑色</span>
                        </li>
                        <li>
                            <span>总价:</span>
                            <span class="spanw">15454.00</span>
                        </li>
                        <li>
                            <span>首付:</span>
                            <span class="spanw">1321324.00</span>
                        </li>
                        <li>
                            <span>月付:</span>
                            <span class="spanw">15234.00</span>
                        </li>
                    </ul>
                    <ul class="listU">
                        <li>
                            <span>上次还款时间:</span>
                            <span>2015-12-5</span>
                        </li>
                        <li>
                            <span>订单完成时间:</span>
                            <span>2015-12-5</span>
                        </li>
                        <li>
                            <span>客服电话:</span>
                            <span>13256987894</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="index_footer">
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-home"></i>
            <span>首页</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-car"></i>
            <span>新车</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#" class="active">
            <i class="fa fa-handshake-o"></i>
            <span>车主服务</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</div>

</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.2.1.1min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var mySwiper = new Swiper ('#index_top_slide', {
            loop: true,
            autoplay : 3000,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#first_pay_slide', {
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#car_owner_story', {
            slidesPerView : 1.3,
            spaceBetween : 10
        });
        $("#index_question_1").click(function(){
            $("#index_answer_1").slideToggle();
            $("#index_question_1 .fa").toggleClass("fa-angle-down");
            $("#index_question_1 .fa").toggleClass("fa-angle-up");
        });
        $("#index_question_2").click(function(){
            $("#index_answer_2").slideToggle();
            $("#index_question_2 .fa").toggleClass("fa-angle-down");
            $("#index_question_2 .fa").toggleClass("fa-angle-up");
        });
        $(".dingdanH").on("click",function(){
            $(".dingdanX").toggle();
        })
    })
</script>
</html>